<template>
    <div id="box">
        <div class="container">
            <div class="control">
                <i class="iconfont icon-Previoustrack" @click="changeSong('previous')"></i>
                <i class="iconfont icon-Play" v-show="!$store.state.isPlay" @click="handleClick(true)"></i>
                <i class="iconfont icon-Pause" v-show="$store.state.isPlay" @click="handleClick(false)"></i>
                <i class="iconfont icon-Nexttrack" @click="changeSong('next')"></i>
            </div>
            <div class="process">
                <img :src="$store.state.currentSong.cover" alt="" @click="playInfo($store.state.currentSong._id)">
                <audio ref="audio" :src="$store.state.currentSong.content" autoplay loop></audio>
                <div class="info">
                    <p><span>{{ $store.state.currentSong.name }}</span><span>{{ $store.state.currentSong.singer }}</span></p>
                    <div class="bar">
                        <div class="slider" :style="{width: myStyle.width}"></div>
                        <div class="time">
                            <span>{{ current_time }}</span>
                            <strong>/</strong>
                            <span>{{ total_time }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    beforeUpdate() {
        clearInterval(this.interval);
        this.interval = setInterval(() => {
            let audio = this.$refs.audio;

            this.currentTime = audio.currentTime;
            this.totalTime = audio.duration;
            this.myStyle.width = (this.currentTime / this.totalTime) * 100 + '%';
        }, 1000);
    },
    data() {
        return {
            interval: null,
            currentTime: 0,
            totalTime: 0,
            myStyle: {
                width: ''
            }
        }
    },
    computed: {
        current_time() {
            let time = Math.floor(this.currentTime);
            let min = Math.floor(time / 60);
            let sec = time % 60;
            return (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
        },
        total_time() {
            let time = Math.floor(this.totalTime);
            let min = Math.floor(time / 60);
            let sec = time % 60;
            return (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
        }
    },
    methods: {
        handleClick(boolean) {
            if(this.$store.state.currentSong.name == '暂未播放音乐') {
                return false
            }

            let audio = this.$refs.audio;

            if (boolean) {
                audio.play();
            } else {
                audio.pause();
            }

            this.$store.commit('togglePlay', boolean);
        },
        playInfo(id) {
            this.$store.commit('togglePlayInfo', true);
            this.$router.push({ path: `/playInfo/${id}` });
        },
        changeSong(param) {
            if (this.$store.state.currentSong.name == '暂未播放音乐') {
                return false
            }

            if (param == 'next') {
                this.$store.commit('changeCurrentSongIndex', 1);
                let currentSong = this.$store.state.currentSongList[this.$store.state.currentSongIndex];
                this.$store.commit('changeCurrentSong', currentSong);
            } else {
                this.$store.commit('changeCurrentSongIndex', -1);
                let currentSong = this.$store.state.currentSongList[this.$store.state.currentSongIndex];
                this.$store.commit('changeCurrentSong', currentSong);
            }
        }
    },
    beforeDestroy() {
        clearInterval(this.interval);
    }
}
</script>

<style lang="scss" scoped>
    #box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        margin-top: 10px;
        border-top: 1px solid #000;
        background-color: rgba($color: #222, $alpha: 0.9);
        box-shadow: 0px 0px 7px 5px #999;

        .container {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            width: 1200px;
            height: 100%;
            padding: 0 20px;
            margin: 0 auto;
            color: #ccc;

            .control {
                flex: 1 1 auto;
                max-width: 15%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-evenly;
                align-items: center;

                i {
                    font-size: 2rem;
                    cursor: pointer;

                    &:nth-child(2) {
                        color: #ddd;
                        font-size: 2.5rem;
                    }

                    &:nth-child(3) {
                        color: #ddd;
                        font-size: 2.5rem;
                    }

                    &:hover {
                        color: #fff;
                    }
                }
            }

            .process {
                flex: 1 1 auto;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: flex-start;

                img {
                    flex: 0 0 auto;
                    box-sizing: content-box;
                    width: 35px;
                    height: 35px;
                    margin-right: 15px;
                    border: 1px solid #000;
                    border-radius: 5px;
                    cursor: pointer;
                }

                .info {
                    width: 100%;

                    p {
                        margin-bottom: 5px;

                        span {
                            margin-right: 15px;
                            color: #999;
                            font-size: 0.7rem;
                            cursor: pointer;

                            &:first-child {
                                color: #eee;
                                font-size: 0.8rem;
                            }

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }

                .bar {
                    position: relative;
                    width: 80%;
                    height: 10px;
                    background-color: #111;
                    border-radius: 5px;
                    box-shadow: 0 3px 10px -3px #999;
                    color: #999;

                    .slider {
                        position: relative;
                        width: 0;
                        height: 100%;
                        background-color: #C20C0C;
                        border-radius: 5px;

                        &::after {
                            content: '';
                            display: block;
                            box-sizing: border-box;
                            position: absolute;
                            top: -3px;
                            right: -10px;
                            width: 15px;
                            height: 15px;
                            border: 5px solid #fff;
                            border-radius: 50%;
                            background-color: #C20C0C;
                        }
                    }

                    .time {
                        position: absolute;
                        top: -5px;
                        right: -100px;

                        strong {
                            margin: 0 3px;
                        }
                    }
                }
            }
        }
    }
</style>